<template>
    <!-- 统一样式导航 -->
    <!-- style="height: 180rpx;" -->
    <view class="head"
        :style="{ backgroundColor: datas.color || '#fff', height: selectData.navBarHeight ? selectData.navBarHeight + 'px' : '180rpx' }">
        <view class="box"
            :style="{ backgroundColor: datas.color || '#fff', height: selectData.navBarHeight ? selectData.navBarHeight + 'px' : '180rpx' }">

            <view class="null"
                :style="{ height: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px' }">
            </view>
            <view class="back"
                :style="{ top: selectData.statusBarHeight + 'px', height: selectData.navBarHeightTitle + 'px' }">
                <view class="back_item flex">
                    <view class="backImg" @click="goBack">
                        <image class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/back.png" />

                    </view>
                    <text class="text ft1">{{ datas.title }}</text>
                    <view :style="{ width: (selectData.menuButtonRight ? selectData.menuButtonRight : 94) + 'px' }"
                        style="color: aqua;height: 100px;">
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="js">
import { ref, defineProps, watch, toRefs, nextTick } from 'vue';
import { onReady } from '@dcloudio/uni-app';

let props = defineProps(['datas'])
const { datas } = toRefs(props)
// watch(() => datas, (newValue, oldValue) => {
// }, { immediate: true, deep: true })
// 返回键
const goBack = () => {
    uni.navigateBack(-1)
}
const selectData = ref({})
onReady(async () => {
    setTimeout(() => {
        nextTick(() => {
            const systemInfo = uni.getSystemInfoSync()
            let statusBarHeight = systemInfo.statusBarHeight
            let screenWidth = systemInfo.screenWidth
            let menuButtonInfo = 0
            // #ifdef MP
            menuButtonInfo = wx.getMenuButtonBoundingClientRect();
            // #endif
            let navHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height

            let navBarHeight = Number(navHeight + statusBarHeight);//导航总高
            selectData.value = {
                navBarHeight: navBarHeight,//导航总高
                statusBarHeight: statusBarHeight,
                screenWidth: screenWidth,
                navBarHeightTitle: navHeight,//导航文字模块总高
                menuButtonRight: (screenWidth - menuButtonInfo.right) + menuButtonInfo.width,

            }
        })
    }, 50)
})
</script>

<style lang="scss" scoped>
.head {
    height: 764rpx;
    // background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/shareHead.png");
    background-size: 100% 100%;
    width: 100%;
    left: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    border-bottom: 2rpx solid #F1F1F1;
    z-index: 10;

    .box {
        position: fixed;
        top: 0;
        left: 0;
    }

    .null {
        width: 100%;
        height: 88rpx;
    }

    .back {
        flex: 1;
        width: 100%;

        &_item {
            height: 100%;
            justify-content: flex-end;
            box-sizing: border-box;

            .backImg {
                width: 60rpx;
                margin-right: auto;
                margin-left: 16rpx;
                text-align: center;
                // background: red;

            }
        }

        .text {
            width: 366rpx;
            text-align: center;

        }

        .icon {
            width: 28rpx;
            height: 48rpx;
            // margin-left: 30rpx;
            // margin-right: auto;
        }
    }

}
</style>